Grid-komponent#141
Conversation
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://lively-water-0d2fd1f03-141.westeurope.3.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Denne PR-en introduserer en ny Grid layout-primitiv i design-systemet, med støtte for både custom element (<ix-grid>), CSS-klasser (.ix-grid) og en React-wrapper (<Grid />), samt tilhørende dokumentasjon, Storybook og eksempel-app.
Changes:
- Lagt til ny
Grid-komponent i@sb1/indeks-reactinkl. tester og eksport i layout-barrel. - Lagt til Grid-styling i
@sb1/indeks-css(container, cols/rows, align/justify, inline, span- og start/end-klasser). - Lagt til Storybook-story, docs (MDX + a11y-data), og eksempel-side/routing for å demonstrere Grid.
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| indeks-storybook/tests/scanAll.dtest.ts | Tillater ny Storybook-tittel for Grid i scan-testen. |
| indeks-storybook/stories/layout/grid/Grid.stories.tsx | Ny Storybook-story som dekker varianter og HTML-eksempel. |
| indeks-react/lib/vite-env.d.ts | JSX typing for <ix-grid> slik at attributter kan brukes i React. |
| indeks-react/lib/ui/layout/index.ts | Eksporterer Grid fra layout-baren. |
| indeks-react/lib/ui/layout/grid/Grid.tsx | Ny React Grid + Grid.Item API (custom element vs as-rendering). |
| indeks-react/lib/ui/layout/grid/Grid.test.tsx | Enhetstester for Grid og Grid.Item. |
| indeks-eksempel/src/pages/openPages/GridKomponent.tsx | Ny eksempel-side som demonstrerer Grid-bruk. |
| indeks-eksempel/src/main.tsx | Router-oppføring for ny eksempel-side. |
| indeks-eksempel/src/components/Layout.tsx | Menylenke til ny eksempel-side. |
| indeks-docs/src/theme/ReactLiveScope/index.tsx | Eksponerer Grid i live-kode-eksempler i docs. |
| indeks-docs/sidebars.ts | Legger Grid til i docs-navigasjonen. |
| indeks-docs/docs/komponenter/primitives/grid.mdx | Ny dokumentasjonsside for Grid (API, eksempler, UU). |
| indeks-docs/docs/komponenter/accessibility/grid.json | A11y-metadata for Grid-siden. |
| indeks-css/css/layout/index.css | Importerer ny grid.css i layout-bundle. |
| indeks-css/css/layout/grid.css | Ny CSS-implementasjon av grid-container + utilities for spans/posisjonering. |
| .changeset/grid-component.md | Changeset for minor bump av @sb1/indeks-css og @sb1/indeks-react. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
antidecaf
force-pushed
the
grid-komponent
branch
from
7a99790 to
0d5e9dc
Compare
dagfrode
left a comment
dagfrode
left a comment
There was a problem hiding this comment.
Synes dette ser bra ut. Så ikke alt for nøye på CSSen. Har brukt grid litt men ikke så mye så ikke så godt kjent med det. Si ifra om du vil jeg skal se mer på det :)
| <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div> | ||
| <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div> | ||
| <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div> | ||
| <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div> |
There was a problem hiding this comment.
Forslag: trekke den like stylingen her ut i en css classe for å redusere støy på det som bare er visuel utforming av eksempel
| ); | ||
| } | ||
|
|
||
| export namespace Grid { |
There was a problem hiding this comment.
se i Card.tsx - det er satt opp slik radix har gjort det og bygger riktig. Ikke sikker på hvorfor dette ikke fungerer. Men har heller ikke prøvd namespaces i js much
Hva er endret?
Hvorfor?
Sjekkliste
pnpm build)pnpm lint)pnpm changeset) — ikke nødvendig for docs-only endringerType endring
Skjermbilder / video